import React,{ useState, useEffect } from 'react';
import { FlatList, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView, Dimensions } from 'react-native';
import { PickerView } from 'antd-mobile-rn';
import ModalDropdown from 'react-native-modal-dropdown';
import { AntDesign } from '@expo/vector-icons';
import ActionButton from 'react-native-action-button';
import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
import Page1 from '../component/Crops/Page1';
import Page2 from '../component/Crops/Page2';
import axios from '../api/axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useFocusEffect } from '@react-navigation/native';

const screenW = Dimensions.get('window').width;
const MyCrops = ({navigation, route}) => {
    const label = ['虚拟作物', '生长日志']
    const [currentPage, setCurrentPage] = useState(0)
    const [list, setList] = useState([])
    const [myx, setMyx] = useState(0)
    const [id, setId] = useState(0)
    // const [list, setList]
    let cropsid = route.params?route.params.cropsid: 0
    const changepage = (index)=>{
        setCurrentPage(index); 
        if(index==1) {
            setMyx(500); 
            AsyncStorage.getItem('mycropsid').then(data => {
                console.log(data);
                if (data) {
                    console.log("znfnjsgwnqlmfkmd");
                    console.log(data);
                    axios.post('/recordlist/getrecordlist', { id: JSON.parse(data)[0].id }).then(res => {
                        console.log(res.data);
                        console.log(666666666);
                        console.log(8889999);
                        setList(res.data)
                    })
                }
            })
        }
        else {
            setMyx(0)
        }

    }
    // 顶部tab栏
    const RenderTabView = () => {
        const RenderTab = ({value})=>{
            let tabTextStyle = null;
            const {item} = value; 
            const {index} = value; 
            const {isTabActive} = value; 
            if(isTabActive){
                // console.log('zzzzz');
                tabTextStyle = {
                    color: '#E74C3C'
                    // color: '#06f'
                }
            } else{
                // console.log('aaaaaa');
                tabTextStyle = {
                    color: '#000'
                }
            }
            return (
                <TouchableOpacity
                    key={index}
                    style={styles.tabStyle}
                    onPress={()=>changepage(index)}
                >
                    <Text style={[tabTextStyle]}>{item}</Text>
                </TouchableOpacity>
            );
        }
        return (
            <View
                style={styles.tabContainer}
            >
                {label.map((item, index)=> {
                    const isTabActive = currentPage === index   // 布尔类型，tab栏的index和当前页码是否一致
                    console.log(isTabActive);
                    return <RenderTab value={{item, index, isTabActive}}/>
                })}
            </View>
        );
    }
    const onMomentumScrollBeginAndEnd = (e) => {
        let offsetX = e.nativeEvent.contentOffset.x;    // 根据上下文求出偏移量
        let page = Math.round(offsetX / screenW);   // 四舍五入，即用户滑动偏移量大于0.5就换页
        if (currentPage !== page) {
            console.log('当前页面-->'+page);
            setCurrentPage(page)
            if(page==1){
                AsyncStorage.getItem('mycropsid').then(data => {
                    console.log(data);
                    if (data) {
                        setId(JSON.parse(data)[0].id)

                        axios.post('/recordlist/getrecordlist', { id: JSON.parse(data)[0].id }).then(res => {
                            setList(res.data)
                        })
                    }
                })
            }
            if(page==0){
                // setRecordlist([])
            }
        }
    }
    useFocusEffect(React.useCallback(() => {
        console.log('_________________________________________________________________________________________________________________________________________________________________________________');
        AsyncStorage.getItem('mycropsid').then(data => {
        console.log('1_________________________________________________________________________________________________________________________________________________________________________________');
        console.log(data);
            if (data) {
                setId(JSON.parse(data)[0].id)
                axios.post('/recordlist/getrecordlist', { id: JSON.parse(data)[0].id }).then(res => {
                    setList(res.data)
                })
            }
        })
    }, []))
    return ( <View
        style={styles.container}
    >
        <RenderTabView value={{currentPage}}/>
        <ScrollView contentOffset = {{x:myx}}
            style={styles.scrollStyle}
            pagingEnabled={true}
            horizontal={true}
            onMomentumScrollBegin={onMomentumScrollBeginAndEnd}
            onMomentumScrollEnd={onMomentumScrollBeginAndEnd}
        >
            {label.map((item, index)=> {
                if(item == '虚拟作物'){
                    return <Page1 key={index} style={{width: screenW, flex:1}} value={{navigation, index, cropsid, id}}/>
                } else if (item=="生长日志"){
                    return <Page2 key={index} style={{width: screenW, flex:1}} value={{navigation, index, list, setList}}/>
                } 
            })}
        </ScrollView>
    </View>)
}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1
    },
    scrollStyle: {
        flex: 1,
    },
    tabContainer: {
        width: screenW,
        flexDirection: 'row',
        alignItems: 'center',
        height: '5%',
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderBottomColor: '#ddd'
    },
    tabStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});
export default MyCrops; 